
<template>
  <div class="coupons-detail">
    <van-nav-bar
        title="优惠券"
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft"  
    />
    <!-- tab-->
    <div class="tab">
      <!-- <div class="tab-type">
        <p class="active">优惠券</p>
        <p>兑换券</p>
      </div> --> 
        <van-tabs v-model="active" swipeable color="#F6A455"> 
            <van-tab title="未使用"> </van-tab>
            <van-tab title="已使用"> </van-tab>
            <van-tab title="已过期"> </van-tab>
        </van-tabs>
    </div>
    <div class="content">
        <p>您还没领取过任何优惠券哦</p>
    </div>
    

    <!-- <div class="receive"><p>领取更多好券</p></div> -->
  </div>
</template>

<script>
  import nError from './../tpl/error'
  import menuTpl from './../tpl/menuTpl'
  export default {
    data(){
        return{
                active:0
        }
    },
    created(){

    },
    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
    },
    components:{
    }

  }
</script>

<style scoped lang="scss">
  .coupons-detail{
    position: relative;
    width: 100%;
    height: 100%;

    /* tab*/
    .tab{
    //   padding-top: .3rem;
      background: #fff; 
        .tab-type{
            margin: 0 auto;
            width: 60%;
            display: flex;
            align-items: center;
            -webkit-align-items: center;
            justify-content: center;
            -webkit-justify-content: center;
            border: #ffeac7 1px solid;

            p{
            padding: .2rem 0;
            flex: 1;
            text-align: center;

            }
            .active{background: #ffeac7;}
        }

      
    }

    .content{
      height: 30%;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;

      p{
        text-align: center;
      }
    }

    .receive{
      position: absolute;
      left: 50%;
      margin-left: -35%;
      bottom: 20%;
      width: 70%;

      p{
        text-align: center;
        padding: .4rem 0;
        background: #ffeac7;
        font-size: .48rem;
      }
    }

  }
</style>
